<template>
  <basic-dialog
    v-model="visible"
    title="代码预览"
    width="90%"
    v-loading="loading"
  >
    <avue-tabs :option="options" @change="handleChange" :key="visible">
    </avue-tabs>
    <div style="max-height: 60vh; overflow-y: auto">
      <highlightjs
        language="java"
        v-if="curActive.prop === 'VO'"
        :code="codeData.VO || ''"
      ></highlightjs>
      <highlightjs
        language="java"
        v-if="curActive.prop === 'DTO'"
        :code="codeData.DTO || ''"
      ></highlightjs>
      <highlightjs
        language="java"
        v-if="curActive.prop === 'Mapper'"
        :code="codeData.Mapper || ''"
      ></highlightjs>
      <highlightjs
        language="java"
        v-if="curActive.prop === 'Controller'"
        :code="codeData.Controller || ''"
      ></highlightjs>
      <highlightjs
        language="java"
        v-if="curActive.prop === 'Service'"
        :code="codeData.Service || ''"
      ></highlightjs>
      <highlightjs
        language="java"
        v-if="curActive.prop === 'ServiceImpl'"
        :code="codeData.ServiceImpl || ''"
      ></highlightjs>
    </div>
  </basic-dialog>
</template>

<script setup>
import { watch } from 'vue'
import { apiCodePreviewData } from '@/apis/objectModel/codeGenerator'

const visible = defineModel()
const code = defineModel('code')
const options = {
  column: [
    {
      icon: 'el-icon-preview',
      label: '显示对象VO',
      prop: 'VO',
    },
    {
      icon: 'el-icon-shopping-cart-full',
      label: '数据传输对象DTO',
      prop: 'DTO',
    },
    {
      icon: 'el-icon-guide',
      label: '数据库操作',
      prop: 'Mapper',
    },
    {
      icon: 'el-icon-guide',
      label: '控制器',
      prop: 'Controller',
    },
    {
      icon: 'el-icon-guide',
      label: '服务接口',
      prop: 'Service',
    },
    {
      icon: 'el-icon-guide',
      label: '服务实现类',
      prop: 'ServiceImpl',
    },
    {
      icon: 'el-icon-guide',
      label: '导出文件',
      prop: 'PO',
    },
  ],
}
const codeData = ref({})
const loading = ref(false)
const curActive = ref({})

const handleChange = (data) => {
  curActive.value = data
}
watch(
  () => visible.value,
  async (val) => {
    if (val) {
      curActive.value = options.column[0]
      console.log(curActive.value, 'aaa')
      const resData = await apiCodePreviewData(code.value, loading)
      codeData.value = resData
    }
  },
  { immediate: true }
)
</script>

<style lang="scss" scoped></style>
